<?php
/**
 * Created by PhpStorm.
 * User: luanalex
 * Date: 2017/9/18
 * Time: 11:31
 */
    require_once ("./api/models/OperationUserModel.php")

?>

<!DOCTYPE html>
<html>

<head>
    <title>十户香</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html">
    <meta charset="UTF-8">
    <meta content="always" name="referrer">
    <meta name="theme-color" content="#2932e1">
    <link href="../home/style/homecss.css" rel="stylesheet" />
    <style type="text/css">
        body {
            display: block;
            align-items: flex-start;
            margin-top: 0px;
            margin-left: 0px;
            margin-right: 0px;
            background-color: aliceblue;
            width: 100%;
            height: 500px;
            link="#ff0000" alink="#ff0000" vlink="#ff0000"
        }
       .topbannerbg {
           display: flex;
           /*justify-content: space-between;*/
           /*align-items: stretch;*/
           width: 100%;
           height: 44px;
           margin-left: 0px;
           top: 0px;
           margin-right: 0px;
           background: #F6821F;
       }

        .topinnerbanner0 {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            height: 44px;
            margin-left: 0px;
            top: 0px;
            margin-right: 0px;
            background: #F6821F;
        }
        .topinnerbanner1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100px;
            margin-left: 0px;
            top: 0px;
            margin-right: 0px;
            background: #ffffff;
        }
        .topbannerleft0 {
            display: flex;
            align-items: center;
            margin-left: 10px;
            width: 100px;
            height: 44px;
            font-size: 12px;
            color: white;
        }

        .topbannerleft1 {
            display: flex;
            justify-content: flex-start;
            margin-left: 10px;
            margin-right: 5px;
            align-items: center;
            height: 44px;
            font-size: 12px;
            color: white;
        }
        .topbannerphone {
            display: flex;
            justify-content: flex-start;
            margin-left: 10px;
            margin-right: 5px;
            align-items: center;
            height: 44px;
            font-size: 12px;
            color: white;
        }
        .topbanner1logo {
            display: flex;
            margin-left: 10px;
        }
        #topbanner1box {
            display: flex;
            position: relative;
            justify-content: space-between;
            height: 100%;
            align-content: space-between;
            align-items: center;
            margin-right: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            overflow: hidden;
        }
        .head_bor { /*选中则框的 分割线*/
            float: left;
            width: 1px;
            height: 20px;
            margin-top: 3px;
            background: #ddd;
        }

        #topbanner1box ul{
            display: flex;
            justify-content: space-between;
            text-align:center;
            list-style-type: square;
            overflow: hidden;
        }

        #topbanner1box ul li{display:flex; justify-content: space-around; width: 100px; }
        #topbanner1box ul li a {text-decoration:none;link: #ff0000;color: gray;}
        .li_a {
            display: flex;
            justify-content: center;
            align-items: flex-start;        /*控制,显示中文还是英文*/
            height: 25px;
            font-size:16px;
            color: gray;
        }
        /********* footer ********/
        .footerbg {
            display: flex;
            width:100%;
            margin-top:5px;
            margin-left: 0px;
            margin-bottom: 10px;
            margin-right: 0px;
            height: auto;
            /*height: 300px;*/
            background-color: #F6821F;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
        body,ul,li{padding: 0; margin: 0;}
        ul,li{list-style: none;}
        body{font-size:12px;}

        #demo1{
            position: relative;
            margin: 50px auto;
            width: 700px;
            /*border:1px solid #ccc;*/
        }
        #demo1 .img_list{overflow: hidden; position: relative; height: 260px;}
        /* 根据图片的张数来设定ul的宽度 */
        .img_list ul{ width: 3500px; position: absolute; height: 260px; left: 0px;}
        .img_list li{ float: left; width: 700px;}
        .img_list img{ margin: 1px; width: 698px; height: 258px;}

        /* 图片对应的按钮样式 */
        .btn_list ul{ position: absolute; right: 20px; bottom: 35px; }
        .btn_list li{ float: left; margin-right: 10px; color: #999; border: 1px solid #ccc; }
        .btn_list li:hover,.btn_list li.on{ cursor: pointer; }
        .btn_list li img{ width: 30px; height: 15px; display: block;}
        /* 左右点击的按钮样式 */
        #demo1 .toLeft,#demo1 .toRight{
            display: none;
            position: absolute;
            width: 20px;
            height: 30px;
            top: 110px;
            background: url(image/zbbg_24.png) no-repeat 0 -150px;
        }

        /* 图片对应的说明*/
        .img_intro{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 25px;
        }
        .img_intro .img_intro_bg,.img_intro .text{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .img_intro .img_intro_bg{
            /*background: #ffffff;*/
            opacity: .3;
            z-index: 999;
        }
        .img_intro .text{
            padding: 5px 10px;
            z-index: 1000;
            color: #ffffff;
        }
        #demo1 .toLeft{
            left: -40px;
        }
        #demo1 .toRight{
            right: -40px;
            background-position: -50px -150px;
        }
    </style>

    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">

        .aboutus {
            display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px;
        }
        .aboutus a div:hover {
            color: #2CB200;
        }
    </style
</head>

<body>

    <div class="topbannerbg">
        <div class="topinnerbanner0">
            <div class="topbannerleft0">安徽 sk 有限公司</div>
            <div class="topbannerleft1"><img src="/sources/tel.png"> <div class="topbannerphone">全国热线电话 400-000-000</div> </div>
        </div>

    </div>
    <div class="topinnerbanner1">
        <div class="topbanner1logo"><img src="./sources/logo.jpg"></div>
        <div id="topbanner1box">
            <ul>
                <li>
                    <div class="head_bor" style="background: #ffffff;"></div>
                    <div class="li_a"><a href="/index.php">首页&ensp;<br>
                            <font style="font-size:12px;">Home</font>&ensp;</a></div>
                </li>
                <li>
                    <div class="head_bor"></div>
                    <div class="li_a"><a href="/web/about/index.php">关于&ensp;<br>
                            <font style="font-size:12px;">ABOUT</font>&ensp;</a></div>
                </li>
                <li>
                    <div class="head_bor"></div>
                    <div class="li_a"><a href="/web/news/index.php">新闻&ensp;<br>
                            <font style="font-size:12px">NEWS</font>&ensp;</a>
                    </div>
                </li>

                <li>
                    <div class="head_bor"></div>
                    <div class="li_a"><a href="/web/supply/index.php">供应商&ensp;<br>
                            <font style="font-size:12px">SUPPLIER</font>&ensp;</a></div>
                </li>


                <li>
                    <div class="head_bor"></div>
                    <div class="li_a"><a href="/web/connect/index.php">联系&ensp;<br>
                            <font style="font-size:12px">CONTACT</font>&ensp;</a></div>
                </li>
            </ul>
        </div>
    </div>
    <!--  这里是网页的内容 start-->
    <div style="display: block; background-color: white;height: auto">
        <div style="display: flex; flex-direction: row; justify-content: center;height: 100%">

            <div id="demo1">
                <div class="img_list">
                    <ul>
                        <li><a href="banli.com" target="_blank"><img src="sources/image/gsh_banner1.jpg" alt="寻花故事"></a></li>
                        <li><a href="http://taobao.com" target="_blank"><img src="sources/image/gsh_banner2.jpg" alt="金瓶梅"></a></li>
                        <li><a href="banli://banli.com" target="_blank"><img src="sources/image/gsh_banner3.jpg" alt="视频听书"></a></li>
                    </ul>

                </div>
                <div class="btn_list">
                    <ul>
                    </ul>
                </div>
                <div class="img_intro">
                    <div class="text"><a href="#" target="_blank"></a></div>
                    <div class="img_intro_bg"></div>
                </div>
<!--                <a href="#" id="toLeft" class="link toLeft"></a>-->
<!--                <a href="#" id="toRight" class="link toRight"></a>-->
            </div>
        </div>
        <div id="demo1" style="display: flex; flex-direction: column; align-items: center;justify-content: center;  background-color: white;height: auto;">
            <div style="display: flex;"><img src="/sources/about.jpg"></div>
              <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 60px;">
                  <p style="display: flex;text-align: center;font-size: 24px;color: #2CB200;line-height: 40px;">
                      打造中国休闲大米优秀品牌 <br>
                      致力于做行业道德楷模
                  </p>
                  <ul class="aboutus">
                      <li style="display: flex; flex-direction: column;align-items: center; margin-left: 30px;margin-right: 30px;">
                          <a href="http://www.baidu.com" style="text-decoration:none;link: #ff0000; color: gray;">
                          <img src="/sources/farm_icon1.png">
                          <div style="text-align: center;">公司简介1</div>
                          </a>
                      </li>
                      <li style="display: flex; flex-direction: column; align-items: center; margin-left: 30px;margin-right: 30px;">
                          <a href="http://www.baidu.com" style="text-decoration:none;link: #ff0000;color: gray;">
                          <img src="/sources/farm_icon3.png">
                          <div style="text-align: center;">品牌故事</div>
                          </a>
                      </li>
                  </ul>
              </div>
        </div>
        <div style="display: block;  background: url('/sources/xw.jpg') no-repeat center top;height: 700px; center:no-repeat;
        width: 100%; margin-left: 0px;margin-right: 0px;">
            新闻
            <div style="display: table; margin-top: 150px; margin: 150px auto 0px; height: 500px; width: 750px;">
            <div style="display: table-row; left: 50px; right: 50px; top: 120px; text-align: left">
                <div style="display: table-cell; background-color: #999999; width: 60%; height: 100%;">
                    <div style="display: table; width: 100%; height: 100%;">
                        <div style="display: table-cell; width: 29%;height: 100%; background-color: #dddddd;">左侧新闻1 </div>
                        <div style="display: table-cell; width: 29%;height: 100%; background-color: #F6821F;">左侧新闻1 </div>
                        <div style="display: table-cell; width: 29%;height: 100%; background-color: #ddffff;">左侧新闻1 </div>
                    </div>
                </div>
                <div style="display: table-cell; background-color: #2CB200;px width: 40%; height: 100%">
                    <div style="display: table; width: 100%; height: 100%; background-color: #F6821F">
                        <div style="display: table-row; width: 100%;height: 29%; background-color: #dddddd;">右侧新闻11 </div>
                        <div style="display: table-row; width: 100%;height: 29%; background-color: #F6821F;">右侧新闻11 </div>
                        <div style="display: table-row; width: 100%;height: 29%; background-color: #dddddd;">右侧新闻11 </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div style="display: flex; flex-direction: column; background-color: white;">
            <div style="display: flex;justify-content: center;"><img src="/sources/product.jpg"></div>
        </div>
        <div style="display: flex; justify-content: flex-start; background: url('/sources/map.jpg') repeat center top;height: 700px; center:no-repeat; width: 100%; margin-left: 0px;margin-right: 0px;">
            产品
        </div>
        <div style="display: block; flex-direction: column;  height: 500px;">
<!--            -moz-background-size:100% auto;-->
            <div style="display: table; background:url(/sources/wm.jpg); background-size: cover; height: 100%; width: 100%">
                <div style="display: flex;justify-content: center;">
                    <!--                <img src="/sources/wm.jpg">-->
                    企业风采
                </div>
            </div>

        </div>

        <div style="display: block;">
            <div style="display: table">
                <div style=" display: table-cell; color: #222222; font-size: 16px; width: 20px;"> </div>
                <div style=" display: table-cell; color: #222222; font-size: 16px"> 友情链接:</div>
                <div style=" display: table-cell; color: #222222; font-size: 16px; width: 20px;"> </div>
                <div style="display: table-cell; margin-left: 50px;color: blue;"> <a href="http://www.baidu.com" style="color: blue;"> 百度</a> </div>
                <div style=" display: table-cell; color: #222222; font-size: 16px; width: 20px;"> </div>
                <div style="display: table-cell; margin-left: 50px; color: blue;"> <a href="http://www.taobao.com" style="color: blue;"> 淘宝</a> <div>
            </div>
        </div>
    </div>
    <!--  这里是网页的内容 end-->

    <div class="footerbg">
        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-left: 0px;margin-right: 0px; margin-bottom: 10px;">
            <div style="display: flex; font-size: 12px;color: #ffffff; margin-left: 20px; "> 上海 sk 没有成立的公司 版权所有 <br> 沪ICP备17041069号
                <br>Copyright © 2014-<?php echo date("Y"); ?> www.brewgame.top</div>
            <div style="display: flex; font-size: 12px;color: #ffffff; margin-right: 20px; ">上海 sk 没有成立的公司</div>
        </div>
    </div>

</body>
</html>

<script type="text/javascript">
    var index = 0;
    var timer = 0;
    var ulist = $('.img_list ul');
    var blist = $('.btn_list ul');
    var list = ulist.find('li');
    var llength = list.length;//li的个数，用来做边缘判断
    var lwidth = $(list[0]).width();//每个li的长度，ul每次移动的距离
    var uwidth = llength * lwidth;//ul的总宽度

    function init(){
        //生成按钮(可以隐藏)
        addBtn(list);
        //显示隐藏左右点击开关
        $('.link').css('display', 'block');
        $('.link').bind('click', function(event) {
            var elm = $(event.target);
            doMove(elm.attr('id'));
            return false;
        });

        //初始化描述
        var text = ulist.find('li').eq(0).find('img').attr('alt');
        var link = ulist.find('li').eq(0).find('a').attr('href');
        $('.img_intro .text a').text(text);
        $('.img_intro .text a').attr('href',link);
        auto();
    }

    function auto(){
        //定时器
        timer = setInterval("doMove('toRight')",3000);

        $('.img_list li, .btn_list li').hover(function() {
            clearInterval(timer);
        }, function() {
            timer = setInterval("doMove('toRight')",3000);
        });
    }

    function changeBtn(i){
        blist.find('li').eq(i).addClass('on').siblings().removeClass('on');
        var text = ulist.find('li').eq(i).find('img').attr('alt');
        var link = ulist.find('li').eq(i).find('a').attr('href');
        $('.img_intro .text a').text(text);
        $('.img_intro .text a').attr('href',link);
    }

    function addBtn (list){
        for (var i = 0; i < list.length; i++) {
            var imgsrc = $(list[i]).find('img').attr('src');
            var listCon = '<li><img src="'+imgsrc+'""></li>';
            $(listCon).appendTo(blist);
            //隐藏button中的数字
            //list.css('text-indent', '10000px');
        };
        blist.find('li').first().addClass('on');
        blist.find('li').click(function(event) {
            var _index = $(this).index();
            doMove(_index);
        });
    }

    function doMove(direction){
        //向右按钮
        if (direction =="toRight") {
            index++;
            if ( index< llength) {
                uwidth = lwidth *index;
                ulist.css('left',-uwidth);
                //ulist.animate({left: -uwidth}, 1000);

            }else{
                ulist.css('left','0px');
                index = 0;
            };
            //向左按钮
        }else if(direction =="toLeft"){
            index--;
            if ( index < 0) {
                index = llength - 1;
            }
            uwidth = lwidth *index;
            ulist.css('left',-uwidth);
            //ulist.animate({left: -uwidth}, "slow");
            //点击数字跳转
        }else{
            index = direction;
            uwidth = lwidth *index;
            ulist.css('left',-uwidth);
        };
        changeBtn(index);
    }
    init();
</script>